<template>
  <div class="app-container">
    <e-charts :option="pieOption" class="chart"/>
    <e-charts :option="lineOption" class="chart"/>
  </div>
</template>

<script>
import {getChartsData} from '@/api/glsims/count'

export default {
  name: "ChartComponent",
  mounted() {
    const _this = this;
    getChartsData().then((response) => {
      // pie
      _this.pieOption.title.text = response.data.pie.title;
      _this.pieOption.title.subtext += response.data.pie.date
      _this.pieOption.series[0].data = response.data.pie.data
      // line
      console.log(response.data.line)
      _this.lineOption.title.text = response.data.line.title
      _this.lineOption.xAxis.data = response.data.line.dates
      console.log("====================")
      console.log(response.data.line.dates)
      console.log("====================")
      console.log(response.data.line.numbers)
      _this.lineOption.series[0].data = response.data.line.numbers
    })
  },
  data() {
    return {
      pieOption : {
        title: {
          text: '',
          subtext: '截止至 ',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '人数',
            type: 'pie',
            stillShowZeroSum: false,
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      lineOption : {
        title: {
          text: '',
          left: 'center'
        },
        xAxis: {
          name: '日期',
          type: 'category',
          data: []
        },
        yAxis: {
          name: '申请人数',
          type: 'value',
          minInterval:1
        },
        series: [
          {
            data: [],
            type: 'line'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
  .chart {
    /*向左浮动*/
    float: left;
    width: 50%;
    height: 400px;
    margin-top: 120px;
  }
</style>
